<script type="text/javascript">
    this.imagePreview = function(){ 
        /* CONFIG */
            
            xOffset = 10;
            yOffset = 30;
            
            // these 2 variable determine popup's distance from the cursor
            // you might want to adjust to get the right result
            
        /* END CONFIG */
        $("a.preview").hover(function(e){
            this.t = this.title;
            this.title = "";    
            var c = (this.t != "preview") ? "<br/>" + this.t : "";
            $(body).append("<p id=''><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                             
            $("#preview")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px")
                .fadeIn("fast");   

        },
        function(){
            this.title = this.t;    
            $("#preview").remove();
        }); 
        $("a.preview").mousemove(function(e){
            $("#preview")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px");
        });         
    };

    $(document).ready(function(){
        imagePreview();
    });
</script>

<style type="text/css">
    .panel-default>.panel-heading {
        color: #333;
        background-color: #f5f5f5;
        border-color: #ddd;
    }
    .panel-heading {
        padding: 10px 15px;
        border-bottom: 1px solid black;
        border-top-right-radius: 3px;
        border-top-left-radius: 3px;
    }
    .photo-a > a > img {
        border-radius: 5px;
        margin :5px;
    }
    .room-header {
        color: #333;
        background-color: #f5f5f5;
        border-color: #ddd;
        padding: 10px 15px;
        border-bottom: 1px solid black;
        border-top-right-radius: 3px;
        border-top-left-radius: 3px;
    }
    .photo-a > a > img {
        border: 1px solid #ECECEC;
        padding: 5px;
        position: relative;
    }
    .att-box{
        background-color: transparent;
        border-bottom: 1px solid black;
        border-top-right-radius: 3px;
        border-top-left-radius: 3px;
        border: 1px solid #ECECEC;
        padding: 5px;
        position: relative;
    }
    #preview{
        position:absolute;
        border:1px solid #ccc;
        background:#333;
        padding:5px;
        display:none;
        color:#fff;
    }
</style>
<%= @uri %>
<div id="root">       
  <section id="content" class="cols-a">
      <article class="vcard">
          <header class="module-a">
              <h2 class="fn org"><%= @results["breadcrumb"]["business_name"] %></h2>
              <p class="rating-a <%= hotel_star(@results["breadcrumb"]["star_rating"]) %>">3/5</p>
                <p class="link"><a href="./">Return</a></p>
                <p class="addthis_toolbox addthis_default_style addthis_16x16_style"><span>Share:</span> <a class="addthis_button_email"></a> <a class="addthis_button_facebook"></a> <a class="addthis_button_twitter"></a></p>
            </header>
            <div class="slider-a">
            <%# @results["all_photo"]["photo"].each do |img| %>
                <!-- <figure>
                    <img src="<%#= img["file_name"].gsub('.s.','.crop.') %> "  alt="<%#= img["photo_type"]%>" width="693" height="283">
                </figure> -->
            <%# end %>
                <figure>
                    <img src="<%= @results["primaryPhotos_large"] %> " width="693" height="283">
                </figure> 
            </div>
            <div class="tabs-a">
                <ul>
                    <li>Overview</li>
                    <li>Facilities</li>
                    <li>Photo</li>
                    <li>Policy</li>
                </ul>
                <div>
                    <div>
                        <p>
                            <%= raw(CGI.unescape(@results["general"]["description"]))%>
                        </p>
                        <ul class="list-g">
                            <% @results["addinfos"]["addinfo"].each do |a,index|  %>
                                <li><%= a %></li>
                            <% end %>  
                        </ul>
                        <p class="adr"><span class="street-address"><%= @results["general"]["address"] %></span></p>
                    </div>
                    <div>
                        <% @fac_hotel = [] %> 
                        <% @fac_room = [] %> 
                        <% @fac_sport = [] %> 
                        <% @results["avail_facilities"]["avail_facilitiy"].each do |fac| %>
                            <% if fac["facility_type"] == "hotel" %>
                                <% @fac_hotel << fac["facility_name"] %>  
                            <% elsif fac["facility_type"] == "room" %>
                                <% @fac_room << fac["facility_name"] %>  
                            <% elsif fac["facility_type"] == "sport" %>
                                <% @fac_sport << fac["facility_name"] %>  
                            <% end %>  
                        <% end %>    
                        <div class="panel-group" id="accordion">
                            <div class="panel panel-default">
                              <div class="panel-heading">
                                <h4 class="panel-title">
                                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                    Hotel Facility
                                  </a>
                                </h4>
                              </div>
                              <div id="collapseOne" class="panel-collapse collapse in">
                                <div class="panel-body">
                                <table class="table">
                                    <% @cek = 1 %>  
                                    <% @fac_hotel.each do |a| %>  
                                        <% if @cek == 1 %>  
                                            <tr>
                                                <% @cek = @cek + 1 %>      
                                                <td> 
                                                    <span class="glyphicon glyphicon-ok"></span> <%= a %>    
                                                </td>
                                            <% elsif @cek == 2 %>
                                                <% @cek = @cek + 1 %>      
                                                <td>
                                                    <span class="glyphicon glyphicon-ok"></span> <%= a %>    
                                                </td>
                                            <% elsif @cek == 3 %>
                                                <% @cek = 1 %>  
                                                <td>
                                                    <span class="glyphicon glyphicon-ok"></span> <%= a %>     
                                                </td>
                                            </tr>    
                                        <% end %>       
                                    <% end %>  
                                </table> 
                                </div>
                              </div>
                            </div>
                            <div class="panel panel-default">
                              <div class="panel-heading">
                                <h4 class="panel-title">
                                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                    Room Facility
                                  </a>
                                </h4>
                              </div>
                              <div id="collapseTwo" class="panel-collapse collapse">
                                <div class="panel-body">
                                <table class="table">
                                    <% @cek = 1 %>  
                                    <% @fac_room.each do |a| %>  
                                        <% if @cek == 1 %>  
                                            <tr>
                                                <% @cek = @cek + 1 %>      
                                                <td>
                                                    <%= a %>    
                                                </td>
                                            <% elsif @cek == 2 %>
                                                <% @cek = @cek + 1 %>      
                                                <td>
                                                    <%= a %>    
                                                </td>
                                            <% elsif @cek == 3 %>
                                                <% @cek = 1 %>  
                                                <td>
                                                    <%= a %>    
                                                </td>
                                            </tr>    
                                        <% end %>       
                                    <% end %>  
                                </table> 
                                </div>
                              </div>
                            </div>
                            <div class="panel panel-default">
                              <div class="panel-heading">
                                <h4 class="panel-title">
                                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                                    Another
                                  </a>
                                </h4>
                              </div>
                              <div id="collapseThree" class="panel-collapse collapse">
                                <div class="panel-body">
                                <table class="table">
                                    <% @cek = 1 %>  
                                    <% @fac_sport.each do |a| %>  
                                        <% if @cek == 1 %>  
                                            <tr>
                                                <% @cek = @cek + 1 %>      
                                                <td>
                                                    <%= a %>    
                                                </td>
                                            <% elsif @cek == 2 %>
                                                <% @cek = @cek + 1 %>      
                                                <td>
                                                    <%= a %>    
                                                </td>
                                            <% elsif @cek == 3 %>
                                                <% @cek = 1 %>  
                                                <td>
                                                    <%= a %>    
                                                </td>
                                            </tr>    
                                        <% end %>       
                                    <% end %>  
                                </table> 
                                </div>
                              </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="image-row">
                            <div class="image-set photo-a" style="padding:0px 10px 10px 20px;">
                                <% @results["all_photo"]["photo"].each do |photo|  %>  
                                    <a class="" href="<%= photo["file_name"].gsub('.s.','.') %>" data-lightbox="example-set" title="<%= photo['photo_type'] %>">
                                        <img class="example-image" src="<%= photo["file_name"] %>" alt="Plants: image 1 0f 4 thumb" width="80" height="80"/>
                                    </a>
                                <% end %>  
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <% if @results["policy"] %>
                            <% @results["policy"].each do |pol| %>
                                <ul>
                                    <li><%= pol["name"] %></li>
                                    <ul>
                                        <li>
                                            Tier one -> <%= pol["tier_one"] %>
                                        </li>
                                        <li>
                                            Tier two -> <%= pol["tier_two"] %>
                                        </li>
                                    </ul>
                                </ul> 
                            <% end %>
                        <% end %>
                    </div>
                </div>
            </div>

            <div >
                <div id="room_desc" >
                    <table>
                        <%= form_tag "hotel_ticket_detail", :method => "GET", class: "form-a" do %>
                            <tr class="room-header">
                                <td>
                                    <p class="date-a">
                                        <label>check-in</label>
                                        <%= text_field_tag 'startdate',params[:startdate], class: "date-picker", style: "" %>
                                    </p>
                                </td>
                                <td>
                                    <p class="date-a">
                                        <label>check-out</label>
                                        <%= text_field_tag 'enddate',params[:enddate], class: "date-picker", style: "" %>
                                    </p>
                                </td>
                                <td>
                                    <span>
                                        <p class="select-a">
                                        <label>rooms</label>
                                        <%= number_field_tag 'room',params[:room], style: "width:30px", class:"jNiceSelectText" %>
                                        </p>
                                    </span>
                                </td>
                                <td>
                                    <span>
                                        <p class="select-a">
                                        <label>adult</label>
                                        <%= number_field_tag 'adult',params[:adult], style: "width:30px", class:"jNiceSelectText" %>
                                        </p>
                                    </span>
                                </td>
                                <td>
                                    <span>
                                        <p class="select-a">
                                        <label>child</label>
                                        <%= number_field_tag 'child',params[:child], style: "width:30px", class:"jNiceSelectText" %>
                                        <%= text_field_tag 'name',params[:name], style: "display:none", class:"jNiceSelectText" %>
                                        <%= text_field_tag 'uid',params[:uid], style: "display:none", class:"jNiceSelectText" %>
                                        <%= text_field_tag 'uid',@night, style: "display:none", class:"jNiceSelectText" %>
                                        </p>
                                    </span>
                                </td>
                                <td>
                                    <label></label>
                                    <%= button_tag "check", class: "btn btn-warning" %>
                                </td>
                            </tr>
                        <% end %>
                    </table>
                    <table>
                        <tr>
                            <td>Room Type</td>
                            <td>Facility</td>
                            <td>Price</td>
                            <td>Action</td>    
                        </tr>
                        <% @results["results"]["result"].each do |room| %>
                            <tr>
                                <td>
                                    <div style="padding:5px;">
                                        <div style="float:left;padding:5px;">
                                            <img src="<%= room["photo_url"] %> ">
                                        </div>
                                        <div style="float:left;padding:10px;">
                                            <label><%= room["room_name"] %></label><br/>
                                                <% if room["with_breakfasts"] == '1' %>
                                                    <label style="font-size: 0.7em;margin-top: -30px;">* Include Breakfast</label>     
                                                <% else %>
                                                    <label style="font-size: 0.7em;margin-top: -30px;">* Not Include Breakfast</label>     
                                                <% end %>
                                        </div>
                                    </div>
                                </td>
                                <td> <%= link_to "show", {controller: "hotel_ticket", action: "show_room_facility", room_facility: room["room_facility"]}, class: "btn btn-warning", remote: true %></td>
                                <td>$. <%= room["price"] %></td>
                                <% u = URI.parse(room["bookUri"].to_s) %>
                                <% p = CGI.parse(u.query) %>
                                <td><%= link_to "Book Now", add_room_ticket_path(startdate: p["startdate"].first, enddate: p["enddate"].first, night: p["night"].first, room: p["room"].first, adult: p["adult"].first, child: p["child"].first, minstar: p["minstar"].first, maxstar: p["maxstar"].first, minprice: p["minprice"].first, maxprice: p["maxprice"].first, hotelname: p["hotelname"].first, room_id: p["room_id"].first, hasPromo: p["hasPromo"].first), class: "btn btn-danger", method: "get", remote: true, disable_with: "loading..." %>
                                    <%= link_to "check out", hotel_order_path(cid: @results['breadcrumb']['city_id']), class: "btn btn-success" %>
                                 </td>
                            </tr>
                        <% end %>
                    </table>
                </div>
            </div>
        </article>
        <aside>
            <p class="scheme-b">Price From <span>$360 <span>/ Night</span></span></p>
            <p class="scheme-a"><%= @results["general"]["address"] %> <iframe width="242" height="156" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/?q=<%= @results['general']['latitude'].to_s %>,<%= @results['general']['longitude'].to_s %>&amp;ie=UTF8&amp;t=m&amp;z=14&amp;ll=<%= @results['general']['latitude'].to_s %><%= @results['general']['longitude'].to_s %>&amp;output=embed"></iframe><br /><small>

            <a href="https://maps.google.com/?q=<%= @results['general']['latitude'].to_s %>,<%= @results['general']['longitude'].to_s %>&amp;ie=UTF8&amp;t=m&amp;z=14&amp;ll=<%= @results['general']['latitude'].to_s %>,<%= @results['general']['longitude'].to_s %>&amp;source=embed" style="color:#0000FF;text-align:left">Lihat Peta Lebih Besar</a></small></p>
        </aside>
        </br> <div> </div> </br> 
        <aside>
            <p class="scheme-b"><span style="font-size:1.3em">Nearby Attractions</span></p>
            <%#= render "form_search" %>
            <% @results["nearby_attractions"]["nearby_attraction"].each do |att| %>
                <div style="padding:5px;">
                    <label><%= att["business_name"] %></label>
                    <div class="">
                        <img src="<%= att["business_primary_photo"] %>" width="80" height="80" class="att-box"/>
                    </div>
                </div>
            <% end %>
        </aside>
    </section>
</div>

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;libraries=geometry&amp;language=en"></script>
